<template>
  <div class="SHZY-common-layout">
    <div class="SHZY-common-layout-center">
      <el-row class="SHZY-common-search-box" :gutter="16">
        <el-form>
          <el-col :span="3">
            <el-form-item label="选择日期">
              <el-date-picker
                type="year"
                v-model="dateyear"
                placeholder="选择日期时间"
                align="right"
                format="yyyy"
                value-format="yyyy"
                @change="yearchange(dateyear)"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="submit()">确认</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <div class="SHZY-common-layout-main SHZY-flex-main">
        <el-form :model="formData" ref="refformData" label-width="auto">
          <el-table
            :height="viewportHeight+'px'"
            :data="formData.inforData"
            size="mini"
            style="width: 100%"
            :row-style="{ height: '40px' }"
            stripe
          >
            <el-table-column
              prop="type"
              class-name="elChgTbeClmn"
              label="类型"
              width="120"
            >
              <template slot="header">
                <div class="elHeadCon">
                  <div class="headerCon1">类型</div>
                  <div class="headerCon2">月份</div>
                  <!-- <div class="headerCon3">特殊</div> -->
                  <div v-if="true" class="headerLine"></div>
                  <!-- <div v-if="true" class="headerLine1"></div> -->
                </div>
                <div class="elHeadCon1">
                  <div class="headerCon3">目标数</div>
                  <div v-if="true" class="headerLine1"></div>
                  <!-- <div class="headerLine1"></div> -->
                </div>
              </template>
              <!-- <el-table-column prop="name" label="目标数" width="120">
            </el-table-column> -->
              <!-- <el-table-column prop="name" label="月份" width="120">
            </el-table-column> -->
              <!-- <template slot-scope="scope">
              <el-input
                v-model="scope.row.date"
                placeholder="请输入内容"
              ></el-input>
            </template> -->
              <!-- <el-table-column prop="date" label="地址"> </el-table-column> -->
            </el-table-column>
            <el-table-column prop="january" label="一月" min-width="70">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'inforData.' + scope.$index + '.january'"
                  :rules="formData.inforRules.january"
                >
                  <el-input v-model="scope.row.january"></el-input>
                </el-form-item>
              </template>
              <!-- <template slot-scope="scope">
                <el-input
                  v-if="isEdit"
                  class="item"
                  v-model="scope.row.January"
                  placeholder="请输入内容"
                ></el-input>
                <div v-else class="txt">{{ scope.row.January }}</div>
              </template> -->
            </el-table-column>
            <el-table-column prop="february" label="二月" min-width="70">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'inforData.' + scope.$index + '.february'"
                  :rules="formData.inforRules.february"
                >
                  <el-input v-model="scope.row.february"></el-input>
                </el-form-item>
                <!-- <el-input
                  v-if="isEdit"
                  class="item"
                  v-model="scope.row.February"
                  placeholder="请输入内容"
                ></el-input>
                <div v-else class="txt">{{ scope.row.February }}</div> -->
              </template>
            </el-table-column>
            <el-table-column prop="march" label="三月" min-width="70">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'inforData.' + scope.$index + '.march'"
                  :rules="formData.inforRules.march"
                >
                  <el-input v-model="scope.row.march"></el-input>
                </el-form-item>
                <!-- <el-input
                  v-if="isEdit"
                  class="item"
                  v-model="scope.row.March"
                  placeholder="请输入内容"
                ></el-input>
                <div v-else class="txt">{{ scope.row.March }}</div> -->
              </template>
            </el-table-column>
            <el-table-column prop="april" label="四月" min-width="70">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'inforData.' + scope.$index + '.april'"
                  :rules="formData.inforRules.april"
                >
                  <el-input v-model="scope.row.april"></el-input>
                </el-form-item>
                <!-- <el-input
                  v-if="isEdit"
                  class="item"
                  v-model="scope.row.April"
                  placeholder="请输入内容"
                ></el-input>
                <div v-else class="txt">{{ scope.row.April }}</div> -->
              </template>
            </el-table-column>
            <el-table-column prop="may" label="五月" min-width="70">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'inforData.' + scope.$index + '.may'"
                  :rules="formData.inforRules.may"
                >
                  <el-input v-model="scope.row.may"></el-input>
                </el-form-item>
                <!-- <el-input
                  v-if="isEdit"
                  class="item"
                  v-model="scope.row.May"
                  placeholder="请输入内容"
                ></el-input>
                <div v-else class="txt">{{ scope.row.May }}</div> -->
              </template>
            </el-table-column>
            <el-table-column prop="june" label="六月" min-width="70">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'inforData.' + scope.$index + '.june'"
                  :rules="formData.inforRules.june"
                >
                  <el-input v-model="scope.row.june"></el-input>
                </el-form-item>
                <!-- <el-input
                  v-if="isEdit"
                  class="item"
                  v-model="scope.row.June"
                  placeholder="请输入内容"
                ></el-input>
                <div v-else class="txt">{{ scope.row.June }}</div> -->
              </template>
            </el-table-column>
            <el-table-column prop="july" label="七月" min-width="70">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'inforData.' + scope.$index + '.july'"
                  :rules="formData.inforRules.july"
                >
                  <el-input v-model="scope.row.july"></el-input>
                </el-form-item>
                <!-- <el-input
                  v-if="isEdit"
                  class="item"
                  v-model="scope.row.July"
                  placeholder="请输入内容"
                ></el-input>
                <div v-else class="txt">{{ scope.row.July }}</div> -->
              </template>
            </el-table-column>
            <el-table-column prop="august" label="八月" min-width="70">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'inforData.' + scope.$index + '.august'"
                  :rules="formData.inforRules.august"
                >
                  <el-input v-model="scope.row.august"></el-input>
                </el-form-item>
                <!-- <el-input
                  v-if="isEdit"
                  class="item"
                  v-model="scope.row.August"
                  placeholder="请输入内容"
                ></el-input>
                <div v-else class="txt">{{ scope.row.August }}</div> -->
              </template>
            </el-table-column>
            <el-table-column prop="september" label="九月" min-width="70">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'inforData.' + scope.$index + '.september'"
                  :rules="formData.inforRules.september"
                >
                  <el-input v-model="scope.row.september"></el-input>
                </el-form-item>
                <!-- <el-input
                  v-if="isEdit"
                  class="item"
                  v-model="scope.row.September"
                  placeholder="请输入内容"
                ></el-input>
                <div v-else class="txt">{{ scope.row.September }}</div> -->
              </template>
            </el-table-column>
            <el-table-column prop="october" label="十月" min-width="70">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'inforData.' + scope.$index + '.october'"
                  :rules="formData.inforRules.october"
                >
                  <el-input v-model="scope.row.october"></el-input>
                </el-form-item>
                <!-- <el-input
                  v-if="isEdit"
                  class="item"
                  v-model="scope.row.October"
                  placeholder="请输入内容"
                ></el-input>
                <div v-else class="txt">{{ scope.row.October }}</div> -->
              </template>
            </el-table-column>
            <el-table-column prop="november" label="十一月" min-width="70">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'inforData.' + scope.$index + '.november'"
                  :rules="formData.inforRules.november"
                >
                  <el-input v-model="scope.row.november"></el-input>
                </el-form-item>
                <!-- <el-input
                  v-if="isEdit"
                  class="item"
                  v-model="scope.row.November"
                  placeholder="请输入内容"
                ></el-input>
                <div v-else class="txt">{{ scope.row.November }}</div> -->
              </template>
            </el-table-column>
            <el-table-column prop="december" label="十二月" min-width="70" >
              <template slot-scope="scope">
                <el-form-item
                  :prop="'inforData.' + scope.$index + '.december'"
                  :rules="formData.inforRules.december"
                >
                  <el-input v-model="scope.row.december"></el-input>
                </el-form-item>
                <!-- <el-input
                  v-if="isEdit"
                  class="item"
                  v-model="scope.row.December"
                  placeholder="请输入内容"
                ></el-input>
                <div v-else class="txt">{{ scope.row.December }}</div> -->
              </template>
            </el-table-column>
            <!-- <el-table-column prop="sort" label="sort" width="180">
            <template slot-scope="scope">
              <el-input
                v-if="scope.row.sort"
                class="item"
                v-model="scope.row.sort"
                placeholder="请输入内容"
              ></el-input>
              <div v-else class="txt">{{ scope.row.sort }}</div>
            </template>
          </el-table-column> -->
            <!-- <el-table-column
            v-for="(columnItem, index) in tableColumns"
            :key="index"
            :prop="columnItem"
            :label="columnItem.lable"
            width="180"
          >
            <template slot-scope="scope">
              <el-input
                class="item"
                v-model="scope.row.sort"
                placeholder="请输入内容"
              ></el-input>
            </template>
          </el-table-column> -->
          </el-table>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
//接口
// import dateinsertapi from "@/api/q1/business/dateinsert";
import dateinsertapi from "@/api/report";
// import { WindowScrollController } from '@fullcalendar/core';
export default {
  components: {},
  data() {
    //自定义验证规则：用于输入正整数
    const rules = (rule, value, callback) => {
      let isrule = /^[1-9]\d*$/.test(value);
      if (isrule) {
        callback();
      } else {
        callback("请输入正整数！");
      }
    };
    return {
      dateyear: "", //年份
      //isEdit: false, //是否编辑
      tableData: [],
      type:'kehu',
      //newtableData: [],
      formData: {
        inforData: [
           // {January:0,February:1,March:1,April:1,May:1,June:1,July:1,August:1,September:1,October:1,November:1,December:1,Total:12,Type:"整机(正式)"}
        ],
        inforRules: {
          january: [
            { required: true, message: "请输入", trigger: "blur" },
            {
              required: true,
              message: "请输入正整数！",
              validator: rules,
              trigger: "blur",
            },
          ],
          february: [
            { required: true, message: "请输入" },
            {
              required: true,
              message: "请输入正整数！",
              validator: rules,
              trigger: "blur",
            },
          ],
          march: [
            { required: true, message: "请输入" },
            {
              required: true,
              message: "请输入正整数！",
              validator: rules,
              trigger: "blur",
            },
          ],
          april: [
            { required: true, message: "请输入" },
            {
              required: true,
              message: "请输入正整数！",
              validator: rules,
              trigger: "blur",
            },
          ],
          may: [
            { required: true, message: "请输入" },
            {
              required: true,
              message: "请输入正整数！",
              validator: rules,
              trigger: "blur",
            },
          ],
          june: [
            { required: true, message: "请输入" },
            {
              required: true,
              message: "请输入正整数！",
              validator: rules,
              trigger: "blur",
            },
          ],
          july: [
            { required: true, message: "请输入" },
            {
              required: true,
              message: "请输入正整数！",
              validator: rules,
              trigger: "blur",
            },
          ],
          august: [
            { required: true, message: "请输入" },
            {
              required: true,
              message: "请输入正整数！",
              validator: rules,
              trigger: "blur",
            },
          ],
          september: [
            { required: true, message: "请输入" },
            {
              required: true,
              message: "请输入正整数！",
              validator: rules,
              trigger: "blur",
            },
          ],
          october: [
            { required: true, message: "请输入" },
            {
              required: true,
              message: "请输入正整数！",
              validator: rules,
              trigger: "blur",
            },
          ],
          november: [
            { required: true, message: "请输入" },
            {
              required: true,
              message: "请输入正整数！",
              validator: rules,
              trigger: "blur",
            },
          ],
          december: [
            { required: true, message: "请输入" },
            {
              required: true,
              message: "请输入正整数！",
              validator: rules,
              trigger: "blur",
            },
          ],
        },
      },
      viewportHeight:""
    };
  },
  computed: {},
  mounted(){
    this.updateViewportHeight();
     window.addEventListener('resize', this.updateViewportHeight);
  },
  beforeDestroy(){
    window.removeEventListener('resize', this.updateViewportHeight); 
  },
  created() {
    this.addcolums();
    this.getyear();
    this.init();
  },
  methods: {
    updateViewportHeight() {
      console.log(window.innerHeight)
      this.viewportHeight = window.innerHeight-200; // 获取并更新视口高度
    }
,
    // handleCellEnter(row, column, cell, event) {
    //   row.isEdit = true;
    // },
    // /** 鼠标移出cell */
    // handleCellLeave(row, column, cell, event) {
    //   row.isEdit = false;
    // },
    submit() {
      //暂时不用
      //判断值 不为空把数据增加到数组里
      // for (var i = 0; i < this.tableData.length; i++) {
      //   //如果tabledata每一行的值都为空
      //   if (
      //     this.tableData[i].January == "" &&
      //     this.tableData[i].February == "" &&
      //     this.tableData[i].March == "" &&
      //     this.tableData[i].April == "" &&
      //     this.tableData[i].May == "" &&
      //     this.tableData[i].June == "" &&
      //     this.tableData[i].July == "" &&
      //     this.tableData[i].August == "" &&
      //     this.tableData[i].September == "" &&
      //     this.tableData[i].October == "" &&
      //     this.tableData[i].November == "" &&
      //     this.tableData[i].December == ""
      //   ) {
      //   } else {
      //     this.newtableData.push(this.tableData[i]);
      //   }
      // }
    //   console.log("确认事件触发");
    //   console.log(this.tableData);
    //   console.log(this.newtableData);

    //   var NewYaer = this.dateyear; //获取选中的年份
      this.$refs['refformData'].validate((vaild) => {
        if (vaild) {
          dateinsertapi
            .create(this.type,this.formData.inforData.map(item => ({  
  ...item, // 复制原始对象的其余属性  
  january: parseInt(item.january),// 将 January 属性转换为字符串  
  february:  parseInt(item.february),
  march:  parseInt(item.march),
  april:  parseInt(item.april),
  may:  parseInt(item.may),
  june:  parseInt(item.june),
  july:  parseInt(item.july),
  august:  parseInt(item.august),
  september:  parseInt(item.september),
  october:  parseInt(item.october),
  november:  parseInt(item.november),
  december:  parseInt(item.december),
})))
            .then((res) => {
              console.log(res);
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
              });
              //新增成功之后调用获取年份数据的接口
              dateinsertapi.getInfo(NewYaer,this.type).then((res) => {
                this.formData.inforData = res.data;
              });
              //新增之后把newtableData清空
              // this.newtableData = [];
              // console.log(this.newtableData)
            })
            .catch((res) => {});
        }
      });
    },
    getyear() {
      let date = new Date();
      var year = date.getFullYear().toString();
      this.dateyear = year;
      console.log(this.dateyear);
      console.log(year);
    },
    addcolums() {
      //排序赋值
      let length = this.formData.inforData.length;
      console.log(length);

      //this.tableColumns.push({ prop: "sort", label: "sort" });
      console.log(this.tableColumns);
      //this.tableData[0].srot=1;
      console.log(this.tableData);

      for (var i = 0; i < length; i++) {
        this.formData.inforData[i].srot = i + 1;
      }
      // let i = this.tableColumns.length;
      // i += 1;
      // this.tableColumns.push({
      //   prop: "sort"+i,
      //   label: "ceshi",
      //   width: "150",
      // });
      // console.log(
      //   this.tableData,
      //   "tableColumnstableColumnstableColumnstableColumns"
      // );
      // this.centerDialogVisible = false;
    },
    init() {
      //初始化数据
      let params={year:this.dateyear,type:this.type};
      dateinsertapi.getInfo(params).then((res) => {
        this.formData.inforData = res;
        console.log(res);
      });
    },
    yearchange(dateyear) {
      let length = this.formData.inforData.length;
      this.dateyear = dateyear;
      let params={year:this.dateyear,type:this.type};
      for (var i = 0; i < length; i++) {
        this.formData.inforData[i].year = dateyear;
      }
      dateinsertapi.getInfo(params).then((res) => {
        this.formData.inforData = res;
        console.log(res);
      });
    },
  },
};
</script>
<style scoped>
/* 如果单元格的padding */
.elChgTbeClmn .cell {
  padding: 0px !important;
}
/* relative相对定位absolute绝对定位 */
.elHeadCon {
  height: 50px;
  position: relative;
}
.elHeadCon1 {
  height: 0px;
  position: relative;
  top: -50px;
}
.headerCon1 {
  position: absolute;
  left: 0;
  bottom: 0;
}
.headerCon2 {
  position: absolute;
  right: 0;
  top: 5px;
}
.headerCon3 {
  position: absolute;
  left: 40px;
  top: 20px;
}
.headerLine {
  width: 1px;
  height: 150px;
  transform: rotate(-43deg);
  transform-origin: top;
  background-color: black;
}
.headerLine1 {
  width: 1px;
  height: 150px;
  transform: rotate(-72deg);
  transform-origin: top;
  background-color: black;
}
</style>
